<template>
  <!-- 发布动态 -->
  <div class="edit-movement">
      <!-- 头部 -->
      <mt-header :title="title" fixed>
        <router-link :to="to" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
        <mt-button  slot="right" class="headusual-2">  
            <svg class="icon icon-fenlei" aria-hidden="true" @click="popup_list">
            <use xlink:href="#icon-fenlei"></use>
          </svg>      
        </mt-button>    
      </mt-header>
      <!-- 请选择动态标签 -->
      <div class="select-tag">
          <p class="p-1">请选择动态标签：</p>
          <p class="p-2">
                <span :class="tag1==1?'activeTag':''" @click="select(1)">作品展示</span>
                <span :class="tag1==2?'activeTag':''" @click="select(2)">成绩展示</span>
                <span :class="tag1==3?'activeTag':''" @click="select(3)">活动展示</span>
                <span :class="tag1==4?'activeTag':''" @click="select(4)">生活展示</span>
          </p>
      </div>
      <textarea class="share-something" placeholder="分享新鲜事..." v-model="info">

      </textarea>
      <!-- 图片预览区域 -->
      <div class="img-preview">
          <div v-for="(item,index) in imgs" :key="index" v-show="item.flag">
              <div>
                  <img :src="item.src" v-preview="item.src"  preview-title-enable="false" preview-nav-enable="false"/>
              </div>
          </div>
          <div>
              <div @click="uploadPic">
                <img src="~@/assets/pic-preview.png" class="photo"/>
                <p>照片</p>
              </div>  
          </div>


      </div>
      <mt-button type="primary" class="fabu-button" @click="SubmitDaily">发布</mt-button>
        <!-- 头部列表弹出层 -->
      <mt-popup v-model="popupList" position="top" class="tanchu-head">
            <!-- 下面列表 -->
        <div class="list-all">
          <div class="list-group list-group-01">
              <router-link to="/">
                  <svg class="icon icon-list" aria-hidden="true">
                    <use xlink:href="#icon-shouye-copy"></use>
                  </svg>
                  <p>首页</p>                             
              </router-link>
              <router-link to="/zgz">
                  <img src="~@/assets/list-zgz.png"/>
                  <p>筑功者</p>                             
              </router-link>
              <router-link to="/projects">
                  <svg class="icon icon-project" aria-hidden="true">
                    <use xlink:href="#icon-fl-gongcheng"></use>
                  </svg>
                  <p>工程项目</p>                             
              </router-link>
              <router-link to="/jobs">
                  <svg class="icon icon-position" aria-hidden="true">
                    <use xlink:href="#icon-yingpinzhiwei-copy-01-copy"></use>
                  </svg>
                  <p>职位</p>                             
              </router-link>
          </div>
            <div class="list-group">
              <router-link to="/projects">
                  <svg class="icon icon-list" aria-hidden="true">
                    <use xlink:href="#icon-xiangmuguanli"></use>
                  </svg>
                  <p>项目管理</p>                             
              </router-link>
              <router-link to="/">
                  <svg class="icon icon-list" aria-hidden="true">
                    <use xlink:href="#icon-gonglve-1-copy"></use>
                  </svg>
                  <p>攻略</p>                             
              </router-link>
              <router-link to="/">
                  <img src="~@/assets/list-jineng.png"/>
                  <p>技能</p>                             
              </router-link>
              <router-link to="/help">
                  <svg class="icon icon-list" aria-hidden="true">
                    <use xlink:href="#icon-bangzhu-copy-1-copy"></use>
                  </svg>
                  <p>帮助中心</p>                             
              </router-link>
          </div>
        </div>
      </mt-popup>
      <input type="file" class="inputfiles"  @change="uploadHandlde(count)"/>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
import {UploadPicture} from '@/api/user/upload';
import {DailyAdd} from '@/api/daily';
export default {
    data(){
        return{
            title:'发布动态',
            to:"/user/movement",
            tag1:1,//类型
            id:0,
            info:"",//内容
            popupList:false, //列表下拉弹窗
            imgs:[
                { flag:false, src:''},
                { flag:false, src:''},
                { flag:false, src:''},
                { flag:false, src:''},
                { flag:false, src:''},
                { flag:false, src:''},
                { flag:false, src:''},
                { flag:false, src:''},
                ],
            count:0, //点击计时
        }
    },
    created(){
         this.id=this.$store.state.userinfo.id;
    },
    methods:{
        select(id){
            this.tag1=id;
        },
        // 弹出下拉列表
        popup_list() {
        this.popupList = !this.popupList;
        },
        // 上传图片
        uploadPic(){
            $('.inputfiles').click();    
        },
        SubmitDaily(){//发布晒场
         if(this.info==""){
                this.$toast("晒场内容不能为空！！"); 
                return false;
         }

            let atlas="";
            this.imgs.forEach(function(item,index,arr){
                if(item.src!=""){
                      atlas+=arr[index].src+",";
                }
            });
            if(atlas==""){
                 this.$toast("请添加晒场图片！！"); 
                return false;
            }
            var data={
                uid:this.id,
                info:this.info,
                tags:this.tag1,
                atlas:atlas.slice(0,atlas.length-1)
            }
            DailyAdd(data).then(res=>{
                if(res.StatusCode===200){
                     this.$toast("发布成功!"); 
                     setTimeout(()=>{
                          this.$router.push("/user/movement");
                     },1500);
                }
            });
        },
        uploadHandlde(index){
            var that=this;
            that.count++;
            if(that.count>8){
               MessageBox.alert('添加图片数不能超过8张', '提示');
               return false;
            }
            var file = $(".inputfiles")[0].files[0];
            let param = new FormData();
            var reader = new FileReader();
            if(file!=''){
                param.append('file', file,file.name); //单个图片 ，多个用循环 append 添加  
                UploadPicture(param).then(res=>{
                    let xx=res.Data.src.replace('ms','mx');
                    reader.onload = function(e) {
                    that.imgs[index].src=xx;
                    that.imgs[index].flag=true;
                    };
                  reader.readAsDataURL(file);
                });
            }
         }
    }
}
</script>

<style lang="scss" scoped>
.edit-movement{
    padding-bottom: 180px;
}
.mint-header {
  background: white;
  color: #282828;
  font-size: 18px;
  height: 52px;
  border-bottom: 2px solid #f4f4f4;
  .headusual-2 {
    width: 100px;
    text-align: right;
    .icon-fenlei{
        font-size: 22px;
    }
  }
}
.select-tag{
    margin-top: 52px;
    font-size: 14px;
    color:#999999;
    padding-bottom: 13px;
    margin: 52px 12px 0px 12px;
    border-bottom: 1px dashed #999999;
    .p-1{
        height: 28px;
        line-height: 28px;
    }
    .p-2{
        margin-top: 5px;
        span{
            padding:  2px 6px;
            border:1px solid #999999;
            border-radius: 11px;
            margin-right: 5px;
        }
        .activeTag{
            color:#fd4f00;
            border-color: #fd4f00;
        }
    }

}
.share-something{
    border: none;
    width: 94%;
    height: 153px;
    margin:20px 12px 20px 12px;
    line-height: 1.6;
}
.img-preview{
    padding: 0 12px;
    display: flex;
    flex-wrap: wrap;
    div{
        flex:0 0 33.3%;
        margin-bottom: 3px;
        div{
            width: 126px;
            height: 126px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            background: #f3f5f8;
            img{
                width: 100%;
                height: 100%;
                display: block;
            }
            .photo{
                width: 39px;
                height: 34px;
                margin-bottom: 6px;
            }

        }

    }
}
.fabu-button{
    background: #fd4f00;
    width: 80px;
    height: 29.3px;
    display: block;
    margin:45px auto;
    font-size: 14px;
    
}
// 上传图片按钮
.inputfiles{
    display: none;
}
.mint-popup {
  width: 100%;
  // height: 100%;
}
// 头部列表弹出层
.tanchu-head {
  margin-top: 52px;
  // 头部
  .mint-header {
    background: white;
    color: #282828;
    font-size: 18px;
    height: 52px;
    border-bottom: 1px solid #f4f4f4;
    .headusual-2 {
      width: 100px;
      text-align: right;
      .icon {
        display: block;
        float: left;
      }
      .icon-list {
        margin-right: 25px;
        margin-left: 30.67px;
      }
    }
  }

  .mint-header-title {
    color: #fd4f00;
    font-size: 18px;
  }
  .list-all {
    padding: 14px 20px;
    .list-group {
      display: flex;
      align-items: center;
      justify-content: space-around;
      text-align: center;
      a {
        flex: 0 0 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        display: block;
        text-align: center;
        img {
          width: 32.6px;
          height: 36px;
          display: block;
          margin: 0 auto;
          margin-bottom: 20px;
        }
        p {
          color: #282828;
          font-size: 14px;
        }
        .icon {
          font-size: 38px;
          color: #3887fe;
          margin-bottom: 13px;
        }
        // .icon-project{
        //   font-size: 40px;
        // }
        // .icon-position{
        //   font-size: 40px;
        // }
      }
    }
    .list-group-01 {
      margin-bottom: 28px;
    }
  }
}
</style>
